<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加演示</title>

    <!-- icon小图标 -->
	<link rel="icon" href="../statics/images/icon_S_Bar_Contact.png" type="image/x-icon">
    <!-- layui -->
    <link rel="stylesheet" href="/statics/static/layui/css/layui.css">
    
    <style>
        .layui-layout-admin .layui-logo {
            left: 2rem;
            text-align: left;
            color: #fff;
        }

        #card-show a:hover {
            background-color: yellow;
            bottom: 2rem;
        }
    </style>
</head>

<body style="background-color: #F3F5F6;">
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        
        

        <!--右侧主体内容区-->
        <div class="layui-body" style="left: 0rem;margin-top: 1rem;">
            <!-- <div class="layui-container">  -->
            <div class="layui-row">
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1 layui-hide layui-show-md-inline-block">
                    &nbsp;
                </div>
                <div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
                    <form class="layui-form" action="" id="content">
                        <div id="problem">
                            <!-- 单选题 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">问题：</label>
                                <div class="layui-input-block" id="radioForm">
                                    <input type="text" name="title" v-model="add" @input="bt" required
                                        lay-verify="required" placeholder="请输入你的问题" autocomplete="off"
                                        class="layui-input">
                                    <input type="radio" name="sex" value="男" title="男">
                                    <input type="radio" name="sex" value="女" title="女">
                                    <!-- <button class="layui-btn layui-btn-primary" style="margin-top: 0.2rem;"></button> -->
                                </div>
                                <label class="layui-form-label"></label>
                                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addNewRadio()"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多选项</button>
                            </div>
                            <!-- 多选题 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">问题：</label>
                                <div class="layui-input-block" id="checkForm">
                                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                                        autocomplete="off" class="layui-input">
                                    <input type="checkbox" name="like[write]" value="写作" title="写作">
                                    <input type="checkbox" name="like[read]" value="阅读" title="阅读">
                                    <input type="checkbox" name="like[dai]" value="发呆" title="发呆">
                                </div>
                                <label class="layui-form-label"></label>
                                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addNewCheck()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多选项</button>
                            </div>
                            <!-- 填空题 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">问题：</label>
                                <div class="layui-input-block" id="writeForm">
                                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                                        autocomplete="off" class="layui-input">
                                    <input type="text" name="title" required lay-verify="required" placeholder="回答"
                                        autocomplete="off" class="layui-input">
                                </div>
                                <label class="layui-form-label"></label>
                                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addNewWrite()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多问题</button>
                            </div>
                            <!-- 打分题 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">问题：</label>
                                <div class="layui-input-block" id="scoreForm">
                                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                                        autocomplete="off" class="layui-input">
                                    <select name="city" lay-verify="required" id="scoreOption">
                                        <option value=""></option>
                                        <option value="0">北京</option>
                                        <option value="1">上海</option>
                                        <option value="2">广州</option>
                                    </select>
                                </div>
                                <label class="layui-form-label"></label>
                                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                                    onclick="addNewScore()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多问题</button>
                            </div>
                        </div>
                        <div id="submitForm">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 添加的问题类型 -->
                    <div id="add" class="layui-col-md12 layui-col-xs12 layui-col-sm12">
                        <p class="layui-col-md12 layui-col-xs12 layui-col-sm12">请选择你要添加的题型：</p>
                        <br>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addRadio()"><img src="../imgs/单选题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 单选题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addCheck()"><img src="../imgs/多选题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 多选题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addWrite()"><img src="../imgs/填空题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 填空题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addScore()"><img src="../imgs/打分题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 打分题</button>
                        <button type="button"
                            class="layui-btn layui-btn-primary layui-border-green layui-col-md2 layui-col-xs6 layui-col-sm3"
                            onclick="addEvaluate()"><img src="../imgs/评价题.png"
                                style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 评价题</button>
                    </div>



                </div>
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1 layui-hide layui-show-md-inline-block">
                    &nbsp;
                </div>
            </div>
            <!-- </div> -->



        </div>


        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            © Questionnaire survey system
        </div>
    </div>
    <!-- jquery -->
    <script src="/statics/js/jquery-3.6.0.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- layui -->
    <script src="/statics/static/layui/layui.js"></script>
    
    <script>
        // // 注销
        // function logout() {
        //     layer.open({
        //         title: "注销",
        //         content: "是否退出当前用户？", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        //         btn: ['注销', '取消']
        //         , yes: function (index, layero) {
        //             axios({
        //                 method: 'post',
        //                 url: '/logout'
        //             }).then(function (response) {
        //                 // axios工具下，服务器真正返回的数据在返回对象的data中
        //                 let res = response.data;
        //                 if (res.code === 200) {
        //                     window.location.href = '/login';
        //                 }
        //             })
        //         }
        //         , btn2: function (index, layero) {
        //             //按钮【按钮二】的回调

        //             // return false //开启该代码可禁止点击该按钮关闭
        //         }
        //     })
        // }

        layui.use(["form", "layer"], function () {
            var form = layui.form;
            // form.render("radio");
            var layer = layui.layer;

            // // 按钮弹出框
            // layer.prompt({
            //     formType: 0,
            //     value: '初始值',
            //     title: '请输入值',
            //     // area: ['800px', '350px'] //自定义文本域宽高
            // }, function (value, index, elem) {
            //     alert(value); //得到value
            //     layer.close(index);
            // });
            form.on('submit(formDemo)', function (data) {
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                return false;
            });

            form.on("radio", function (data) {
                let res = data.value;
                console.log(res);
            })
            let arr = [];
            form.on("checkbox", function (data) {

                // console.log(data.elem); //得到checkbox原始DOM对象
                // console.log(data.elem.checked); //是否被选中，true或者false
                // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                // console.log(data.othis); //得到美化后的DOM对象

                let res = data.value;


                if (data.elem.checked === true) {
                    arr.push(res)
                } else if (data.elem.checked === false) {
                    arr.forEach(a => {
                        var index = arr.indexOf(res);
                        if (index > -1) {
                            arr.splice(index, 1);
                        }
                    })

                }
                // arr.forEach()
                console.log(arr);
            })

        })

        let s = new Vue({
            el: "#radioForm",
            data: {
                add: ""
            },
            methods: {
                bt: function () {
                    console.log(this.add);
                }
            }

        })






        // 添加单选题
        function addNewRadio() {

            // let html = `
            // <input type="radio" name="sex" value="女" title="女">
            // `

            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // 按钮弹出框
                layer.prompt({
                    formType: 0,
                    value: '选项内容',
                    title: '请输入你要添加的选项',
                    // area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    // alert(value); //得到value
                    let html = `
                    <input type="radio" name="sex" value="${value}" title="${value}">
                    `
                    $(`#radioForm`).append(html);
                    layer.close(index);
                    form.render();//关键代码
                });

            });
        }
        //添加单选题目
        function addRadio() {
            let html = `
                <div class="layui-form-item">
                    <label class="layui-form-label">问题：</label>
                    <div class="layui-input-block" id="radioForm">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input">
                        <input type="radio" name="sex" value="男" title="男">
                        <input type="radio" name="sex" value="女" title="女">
                        <!-- <button class="layui-btn layui-btn-primary" style="margin-top: 0.2rem;"></button> -->
                    </div>
                    <label class="layui-form-label"></label>
                    <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                        onclick="addNewRadio()"><img src="../imgs/添加.png"
                            style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多选项</button>
                </div>
            `
            $("#problem").append(html);
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                form.render();//关键代码
            });
        }


        // 添加多选题
        function addNewCheck() {

            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // // 按钮弹出框
                layer.prompt({
                    formType: 0,
                    value: '初始值',
                    title: '请输入值',
                    // area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    let html = `
                    <input type="checkbox" name="like[dai]" title="${value}" value="${value}"">
                    `
                    $("#checkForm").append(html);
                    layer.close(index);
                    form.render();//关键代码
                });

            });
        }
        // 添加多选题目
        function addCheck() {
            let html = `
            <div class="layui-form-item">
                <label class="layui-form-label">问题：</label>
                <div class="layui-input-block" id="checkForm">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                        autocomplete="off" class="layui-input">
                    <input type="checkbox" name="like[write]" value="写作" title="写作">
                    <input type="checkbox" name="like[read]" value="阅读" title="阅读">
                    <input type="checkbox" name="like[dai]" value="发呆" title="发呆">
                </div>
                <label class="layui-form-label"></label>
                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                    onclick="addNewCheck()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多选项</button>
            </div>
            `
            $("#problem").append(html);
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                form.render();//关键代码
            });
        }

        // 添加填空题
        function addNewWrite() {
            let html = `
                <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                    autocomplete="off" class="layui-input">
                <input type="text" name="title" required lay-verify="required" placeholder="回答"
                    autocomplete="off" class="layui-input">
            `
            $("#writeForm").append(html);
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // // 按钮弹出框
                // layer.prompt({
                //     formType: 0,
                //     value: '初始值',
                //     title: '请输入值',
                //     // area: ['800px', '350px'] //自定义文本域宽高
                // }, function (value, index, elem) {
                //     alert(value); //得到value
                //     layer.close(index);
                // });
                form.render();//关键代码
            });
        }
        // 添加填空题目
        function addWrite() {
            let html = `
            <div class="layui-form-item">
                <label class="layui-form-label">问题：</label>
                <div class="layui-input-block" id="writeForm">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                        autocomplete="off" class="layui-input">
                    <input type="text" name="title" required lay-verify="required" placeholder="回答"
                        autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label"></label>
                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                    onclick="addNewWrite()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多问题</button>
            </div>
            `
            $("#problem").append(html);
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                form.render();//关键代码
            });
        }

        // 添加打分
        function addNewScore() {
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                // 按钮弹出框
                layer.prompt({
                    formType: 0,
                    value: '初始值',
                    title: '请输入值',
                    // area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    let html = `
                    <option value="${value}">${value}</option>
                    `
                    $("#scoreOption").append(html);
                    layer.close(index);
                    form.render();//关键代码
                });

            });
        }
        // 添加打分题
        function addScore() {
            let html = `
            <div class="layui-form-item">
                <label class="layui-form-label">问题：</label>
                <div class="layui-input-block" id="scoreForm">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题"
                        autocomplete="off" class="layui-input">
                        <select name="city" lay-verify="required" id="scoreOption">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                        </select>
                </div>
                <label class="layui-form-label"></label>
                <button type="button" class="layui-btn layui-btn-primary layui-border-green "
                    onclick="addNewScore()" style="margin-top:0.5rem"><img src="../imgs/添加.png"
                        style="width: 1rem;height: 1rem;margin-bottom: 0.1rem;"> 添加更多问题</button>
            </div>
            `
            $("#problem").append(html);
            layui.use(['form', 'layer'], function () {
                var form = layui.form, layer = layui.layer;
                form.render();//关键代码
            });
        }
    </script>
</body>

</html>